import React, { Component } from 'react';

// const { Table, Tag, Space } = antd;
import { Table, Tag, Space, Button } from "antd"
import TodoListModal from './components/TodoListModal/TodoListModal';
const data = [
    {
      key: "1",
      name: "John Brown",
      age: 32,
      address: "New York No. 1 Lake Park",
      tags: ["nice", "developer"]
    },
    {
      key: "2",
      name: "Jim Green",
      age: 42,
      address: "London No. 1 Lake Park",
      tags: ["loser"]
    },
    {
      key: "3",
      name: "Joe Black",
      age: 32,
      address: "Sidney No. 1 Lake Park",
      tags: ["cool", "teacher"]
    }
  ];


  
export default class TodoList extends Component {
    constructor(props) {
        super(props)
        this.state = {
            data,
            updata: false,
            record: null
        }
    }

    columns = [
        {
          title: "Name",
          dataIndex: "name",
          key: "name",
          render: (text) => <a>{text}</a>
        },
        {
          title: "Age",
          dataIndex: "age",
          key: "age"
        },
        {
          title: "Address",
          dataIndex: "address",
          key: "address"
        },
       
        {
          title: "operation",
          key: "action",
          render: (text, record) => (
            <Space size="middle">
              <a onClick={() => this.deleteItem(record)} >Delete</a>
              {/* <a>Update {record.name}</a> */}
              <a onClick={() => {this.addUser("updata", record)}}>Update </a>
            </Space>
          )
        }
      ];


    addUser = (dataType, record) => {
        // console.log("000", dataType, record)
        if(dataType == "updata") {
            this.setState({
                updata: true,
                record
            })
            this.modal.showModal()

        } else {
            this.setState({
                updata: false
            })
            this.modal.showModal()
        }
    }

    getValue = (value) => {
        console.log("父组件 接收：", value)
        const {Name, Address, Age, key } = value
        const {data} = this.state
       

        if(key) {
            let newData = JSON.parse(JSON.stringify(data))
            // console.log("****", data.findIndex(i => i.key == key))
            newData.splice(data.findIndex(i => i.key == key), 1, {name: Name, key, age: Age, address: Address})
            this.setState({
                data: newData
            })

        } else {
            data.push({key: data[data.length-1].key+"1w", name: Name, address: Address, age: Age })
            let newData = JSON.parse(JSON.stringify(data))
            this.setState({
                data: newData
            })
        }
    }

    deleteItem = (record) => {  //  删除 按钮 
        const { data } = this.state
        this.setState({
            data: data.filter((f, index) => {
                return f.key !== record.key
            })
        })
    }
 
  render() {
      const {data, updata, record} = this.state
    return (
      <div>
          <Button onClick={() => this.addUser("add")} type="primary">Add a row</Button>
          <Table columns={this.columns} dataSource={data}/>
          <TodoListModal ref={e => this.modal = e} getValue={this.getValue} updata={updata} record={record}  />
      </div>
    )
  }


}


